<template>
	<uni-popup ref="carOp" type="center">
		<view class="carList">
			<view v-for="(item,index) in list" :key="index" @click="berplate(item.cart_code)"
				:style="{background:cars===item.cart_code?'#1B91FF':'',color:cars===item.cart_code?'#fff':''}">
				{{item.cart_code}}
			</view>
		</view>
	</uni-popup>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { toPublish } from '@mqtt';
	import { showLoading, errorToast } from '@/utils/prompt';
	import { getHistoryCart } from '@/gql/reservation';
	import { getDriverID } from '@/stores/driverID';
	const driver_id = getDriverID();
	const emit = defineEmits(['berplate']);
	const carOp = ref(null)
	const cars = ref('')
	const list = ref([])
	function init() {
		showLoading()
		const payload = {
			query: getHistoryCart,
			variables: {
				driver_id
			},
		};
		toPublish(
			'ql/plug/getHistoryCart',
			payload,
			(obj : any) => {
				uni.hideLoading();
				const { getHistoryCart } = obj.data;
				list.value = getHistoryCart
				if (getHistoryCart.length > 0) {
					cars.value = getHistoryCart[0].cart_code
					emit('berplate', cars.value)
				}
			}
		);
	}
	function open() {
		if (list.value.length > 0) {
			carOp.value.open()
		} else {
			errorToast('暂无历史车牌')
		}
	}
	function berplate(car : string) {
		carOp.value.close()
		cars.value = car
		emit('berplate', car)
	}
	defineExpose({ open, init });
</script>

<style scoped lang="less">
	.carList {
		width: 620rpx;
		height: 400rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		display: flex;
		align-content: flex-start;
		flex-wrap: wrap;
		padding: 20rpx;
		box-sizing: border-box;

		view:nth-child(3n) {
			margin-right: 0rpx;
		}

		view {
			width: 181rpx;
			height: 67rpx;
			background: #EAEAEA;
			border-radius: 10rpx;
			text-align: center;
			line-height: 67rpx;
			margin: 0px 18rpx 20rpx 0px;
		}
	}
</style>